<template>
    <div class="login">
        <Row>
            <Col span="12">
                <ButtonGroup class="login-menu">
                    <Button type="text" icon="md-remove" ghost @click="minWindow()"></Button>
                    <Button type="text" icon="md-close" ghost  @click="closeWindow()"></Button>
                </ButtonGroup>
            </Col>
            <Col span="12">
                <div class="login-show">
                    <img class="login-img" src="~@/assets/350-400.jpg" alt="electron-vue" />
                </div>
            </Col>
            <Col span="12">
                <div class="login-form">
                    <img class="login-logo" src="~@/assets/logo.png" alt="electron-vue" />
                    <Form ref="formInline">
                        <FormItem prop="user">
                            <Input type="text" size="large" placeholder="Username">
                                <Icon type="ios-person-outline" slot="prepend"></Icon>
                            </Input>
                        </FormItem>
                        <FormItem prop="password">
                            <Input type="password" size="large" placeholder="Password">
                                <Icon type="ios-lock-outline" slot="prepend"></Icon>
                            </Input>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" @click="handleSubmit()" long>Signin</Button>
                        </FormItem>
                    </Form>
                </div>
            </Col>
        </Row>
    </div>
</template>
<script>

const {ipcRenderer} = require('electron')

export default {
    data () {
        return {

        }
    },
    methods: {
        handleSubmit() {
            ipcRenderer.send('login-system', "login-system")
        },
        minWindow() {
            ipcRenderer.send('min-loginWindow', "min-loginWindow")
        },
        closeWindow() {
            ipcRenderer.send('close-loginWindow', "close-loginWindow")
        }
    }
};
</script>
<style scoped>

.login-menu {
    position: fixed;
    left: 610px;
    z-index:1000;
}

.login-show {
    position: fixed;
}
.login-img {
    width: 350px;
    height: 400px;
}

.login-form {
    position: fixed;
    left: 350px;
    padding-top: 50px;
    width: 350px;
    height: 400px;
    background-color: #283043;
}
.login-form form{
    margin: 0 auto;
    width: 90%;
}
.login-logo {
    height: 50px;
    margin-bottom: 20px;
}
</style>
